import React, { useMemo, useState } from "react";

const Child = React.memo(function (props) {
    console.log("子组件渲染了 render ");
    return <div>Child {props.obj.name}</div>;
});

function App() {
    const [obj, setObj] = useState({ name: "大飞是黑马一哥" });
    // const [random, setRandom] = useState(0);
    // {} === {} 不相等

    const newObj = useMemo(() => obj, [JSON.stringify(obj)]); // 只有obj内容发生改变才会去生成一个新的obj

    return (
        <div>
            {/* <p>{random}</p>
            <button
                onClick={() => {
                    setRandom(Math.random());
                }}>
                生成随机数
            </button> */}
            <Child obj={newObj}></Child>
            <button
                onClick={() => {
                    setObj({ name: "大飞是黑马一哥" }); // 每次setObj -> obj是一个新的对象
                }}>
                setObj
            </button>
        </div>
    );
}

export default App;
